<template>
  <div>

    <el-row>
      <el-col span="24">
        <h1>房屋选择</h1>
      </el-col>
    </el-row><!--style="border: 2px rgb(23,179,163) solid ;border-radius:15px;padding-top: 20px;"-->
    <el-row>
      <el-col span="1"><span>&nbsp</span></el-col>
      <el-col span="4">
        <el-form>
          <el-form-item label="当前工程：">
            <el-select
              v-model="value"
              placeholder="请选择要分配的工程"
              maxlength="255"
              :disabled="false"
              clearable>
              <el-option
                v-for="item in selectOptionsAll"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>

        </el-form>
      </el-col>
      <el-col span="1">
        <el-button @click="getHouseAll">确定</el-button>
      </el-col>
      <el-col span="1"><span>&nbsp</span></el-col>
      <el-col span="3">
        <el-form>
          <el-form-item label="选中房屋编号：" label-width="140px">
            <el-input v-model="dataForm.houseId" placeholder="房屋编号"></el-input>
            <!--:disabled="true"-->
          </el-form-item>
        </el-form>

      </el-col>
      <el-col span="4"><span>&nbsp</span></el-col>
      <el-col span="4">

        <el-form>
          <el-form-item label="当前拆迁户" label-width="110px">
            <el-input v-model="dataForm.familyId" placeholder="选择拆迁户"></el-input>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col span="1"><span>&nbsp</span></el-col>
      <el-col span="1">
        <el-button type="primary" @click="submits()">
          提交
        </el-button>
      </el-col>
      <el-col span="1"><span>&nbsp</span></el-col>
      <el-col span="2">
        <el-button @click="cancel" type="danger">清空选择</el-button>
      </el-col>
      <el-form :inline="true">
      </el-form>
    </el-row>
    <div style="height: 5px"></div>
    <el-row>
      <el-col span="1">&nbsp</el-col>
      <el-col span="10">

        <!--HouseShow-->
        <el-table
          :data="dataLists"
          border
          v-loading="dataListLoadings"
          @selection-change="selectionChangeHandles"
          style="width: 100%;height:550px"
          max-height="1750">
          <el-table-column
            prop="id"
            header-align="center"
            align="center"
            label="房屋编号">
          </el-table-column>
          <el-table-column
            prop="huxing"
            header-align="center"
            align="center"
            label="户型">
          </el-table-column>
          <el-table-column
            prop="suqare"
            header-align="center"
            align="center"
            label="面积">
          </el-table-column>
          <el-table-column
            prop="xiaoqu"
            header-align="center"
            align="center"
            label="所属小区">
          </el-table-column>
          <el-table-column
            prop="dongId"
            header-align="center"
            align="center"
            label="楼栋号">
          </el-table-column>
          <el-table-column
            prop="houseNum"
            header-align="center"
            align="center"
            label="门牌号">
          </el-table-column>
          <el-table-column
            label="操作"
            width="80">
            <template slot-scope="scope">
              <el-button
                @click.native.prevent="selectHouse(scope.$index, tableData)"
                type="text"
                size="small">
                选择
              </el-button>
            </template>
          </el-table-column>

        </el-table>
        <el-pagination
          @size-change="sizeChangeHandles"
          @current-change="currentChangeHandles"
          :current-page="pageIndexs"
          :page-sizes="[10, 20, 50, 100,200,400]"
          :page-size="pageSizes"
          :total="totalPages"
          layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>
      </el-col>
      <el-col span="2">&nbsp</el-col>

      <!--FamilyShow-->
      <el-col span="10">
        <el-table
          :data="dataList"
          border
          v-loading="dataListLoading"
          @selection-change="selectionChangeHandle"
          style="width: 100%;">
          <el-table-column
            prop="id"
            header-align="center"
            align="center"
            label="编号">
          </el-table-column>
          <el-table-column
            prop="name"
            header-align="center"
            align="center"
            label="户主姓名">
          </el-table-column>
          <el-table-column
            prop="idcard"
            header-align="center"
            align="center"
            label="户主身份证号">
          </el-table-column>
          <el-table-column
            prop="projectId"
            header-align="center"
            align="center"
            label="所属工程Id">
          </el-table-column>
          <el-table-column
            prop="familyNum"
            header-align="center"
            align="center"
            label="家庭人口">
          </el-table-column>
          <el-table-column
            prop="suqareCo"
            header-align="center"
            align="center"
            label="核准拆迁面积">
          </el-table-column>
          <el-table-column
            label="操作"
            width="80">
            <template slot-scope="scope">
              <el-button
                @click.native.prevent="selectFamily(scope.$index, tableData)"
                type="text"
                size="small">
                选择
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="sizeChangeHandle"
          @current-change="currentChangeHandle"
          :current-page="pageIndex"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          :total="totalPage"
          layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>
      </el-col>
    </el-row>

  </div>
</template>
<script>
  export default {
    data () {
      return {
        selectOptionsAll: [],
        value: undefined,
        demo: 'demo',

        //房屋展示相关
        dataLists: [],
        pageIndexs: 1,
        pageSizes: 10,
        totalPages: 0,
        dataListLoadings: false,
        dataListSelections: undefined,

        //户主展示相关
        dataList: [],
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
        dataListLoading: false,

        dataForm: {
          houseId: undefined,
          familyId: undefined
        }

      }
    },
    activated () {
      this.getDataLists()
      this.geitIdandName()
    },
    methods: {

      //取消选中的房屋
      cancel () {
        this.dataForm.houseId = undefined
        this.dataForm.familyId = undefined
        this.value = undefined
        this.getHouseAll()
      },

      //初始化下拉框中的选项
      // 房屋展示每页数
      sizeChangeHandles (val) {
        this.pageSizes = val
        this.pageIndexs = 1
        this.getHouseAll()
      },
      // 房屋展示当前页
      currentChangeHandles (val) {
        this.pageIndexs = val
        this.getHouseAll()
      },

      //绑定选中的房屋
      selectHouse (index, row) {
        this.dataForm.houseId = this.dataLists[index].id

      },
      //绑定选中拆迁户
      selectFamily (index, row) {
        if (this.dataForm.houseId != undefined) {
          this.dataForm.familyId = this.dataList[index].id
        }
        if (this.dataForm.houseId === undefined) {
          const h = this.$createElement
          this.$notify({
            message: h('i', {style: 'color: red'}, '请先选择房屋信息 再进行拆迁户选择'),
            duration: 1000
          })
        }
      },
      // 户主每页数
      sizeChangeHandle (val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDataLists()
      },
      // 户主当前页
      currentChangeHandle (val) {
        this.pageIndex = val
        this.getDataLists()
      },
      async getSelectOptions () {
        try {
          //定义一个变量用来接收从后台查出的数据
          //下面的indexResources是之前引入好的service方法
          const select = {
            code: '0',
            data: []
          }
          console.log(selectResult)
          //做一下判断
          if (selectResult) {
            //查出值之后对之前声明好的变量进行赋值
            this.selectOptionsAll = selectResult
          } else {
            this.$message.info(
              '没有可选择的下拉框'
            )
          }
        } catch (err) {
          this.$notify({
            title: '初始化下拉框失败',
            message: err.message,
            type: 'warning',
            showClose: false
          })
        } finally {
          this.dialogLoading = false
        }
      },

      //获取下拉列表的工程名称
      geitIdandName () {

        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/diaobo/diaobo/idandname'),
          method: 'get',
          params: this.$http.adornParams({
            'page': this.pageIndex,
            'limit': this.pageSize,
          })
        }).then(({data}) => {
          this.selectOptionsAll = data.data
        })
      },

      //获取房屋信息
      getHouseAll () {
        this.dataListLoadings = true
        this.$http({
          url: this.$http.adornUrl('/generator/house/queryByProIdAndHostIsnull'),
          method: 'get',
          params: this.$http.adornParams({
            'page': this.pageIndexs,
            'limit': this.pageSizes,
            'hostname': '',
            'xiaoqu': '',
            'projectId': this.value

          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.dataLists = data.page.list
            this.totalPages = data.page.totalCount
          } else {
            this.dataLists = []
            this.totalPages = 0
          }
          if (data.page.totalCount ===0){
            const h = this.$createElement
            this.$notify({
              message: h('i', {style: 'color: green'}, '此工程暂时没有需要调拨的房屋 '),
              duration: 3000
            })
          }
          this.dataListLoadings = false
        })
      },
      // 获取户主数据列表
      getDataLists () {
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/generator/family/list'),
          method: 'get',
          params: this.$http.adornParams({
            'page': this.pageIndex,
            'limit': this.pageSize,
            // 'houseId': ''
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.dataList = data.page.list
            this.totalPage = data.page.totalCount
          } else {
            this.dataList = []
            this.totalPage = 0
          }
          this.dataListLoading = false
        })
      },
      submits () {
        let houseId = this.dataForm.houseId
        let familyId = this.dataForm.familyId
        if (familyId === undefined) {
          const h = this.$createElement
          this.$notify({
            message: h('i', {style: 'color: red'}, ' 请进行拆迁户选择'),
            duration: 1000
          })
        }
        if (houseId === undefined) {
          const h = this.$createElement
          this.$notify({
            message: h('i', {style: 'color: red'}, '请先选择房屋信息 '),
            duration: 1000
          })
        }
        if (houseId != undefined && familyId != undefined) {
          this.$http({
            url: this.$http.adornUrl('/diaobo/diaobo/fenpei'),
            method: 'post',
            params: this.$http.adornParams({
              'hostid': houseId,
              'familyId': familyId
            })
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.visible = false
                  this.$emit('refreshDataList')
                }
              })
            } else {
              this.$message.error(data.msg)
            }
            this.getHouseAll()
          })
        }

      }

    }
  }
</script>
